import { useTableScroll } from '@/hooks/useTableScroll';
import { getLoginTravel } from '@/services/account-center';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { message } from 'antd';
import { useRef, useState } from 'react';

const LoginRecord = () => {
  const [count] = useState(0);
  const tableScrollHeight = useTableScroll({}, count);
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<any>[] = [
    {
      title: '登录时间',
      dataIndex: 'loginTime',
      width: 160,
    },
    {
      title: '登录账号',
      dataIndex: 'mobile',
      width: 160,
    },
    {
      title: '登录角色',
      dataIndex: 'aa',
      width: 160,
      render: () => {
        return <span>自己</span>;
      },
    },
    {
      title: '登录IP地址',
      dataIndex: 'lastLoginIp',
      width: 160,
    },
  ];
  const { initialState } = useModel('@@initialState');

  // useEffect(() => {
  //   refresh();
  // }, []);

  return (
    <div>
      <ProTable
        scroll={{ y: tableScrollHeight, x: 200 }}
        rowKey="loginTime"
        search={false}
        columns={columns}
        pagination={{
          defaultPageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        request={async (params) => {
          const res = (await getLoginTravel({
            pageNo: Number(params.current) - 1,
            pageSize: Number(params.pageSize),
          })) as any;
          if (res.success) {
            return {
              data: res.data,
              total: res.count,
              success: true,
            };
          } else {
            message.error(res.resultMessage);
            return { data: [] };
          }
        }}
        actionRef={actionRef}
        cardBordered
        columnsState={{
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
        }}
        headerTitle={
          <div>上一次登录时间：{initialState?.currentUser.lastLoginTime}</div>
        }
      />
    </div>
  );
};

export default LoginRecord;
